<template>
	<view class="content-product-type">
		<view :class="{'fiexed':isFixed }">
			<scroll-view  id="navbar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
				<view   class="nav-item"
						:class="{'current': index === tabCurrentIndex}"
						v-for="(item,index) in list" :key="item.id"
						:id="'tab'+index"
						@click="changeTab(index)"
				>{{item.category_name}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	let windowWidth = 0, scrollTimer = false, tabBar;
	export default {
		name: 'jst-product-type',
		data() {
			return {
				tabCurrentIndex: 0,
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: []
			}
		},
		watch:{
			tabCurrentIndex(val) {
				this.$emit('selectItem',val)
			}
		},
		mounted() {
			windowWidth = uni.getSystemInfoSync().windowWidth;
		},
		props:{
			list: {
				type:Array,
				default() {
					return []
				}
			},
			isFixed: {
				type: Boolean,
				default: false
			}
		},
		methods:{
			handleChanIndex(index) {
				this.selectIndex = index
				this.$emit('selectItem',index)
			},
			//tab切换
			async changeTab(e){
				if(scrollTimer){
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if(typeof e === 'object'){
					index = e.detail.current
				}
				if(typeof tabBar !== 'object'){
					tabBar = await this.getElSize("navbar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if(i === index){
						nowWidth = result.width;
					}
				}
				if(typeof e === 'number'){
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(()=>{
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth/2 - windowWidth / 2;
					}else{
						this.scrollLeft = 0;
					}
					if(typeof e === 'object'){
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;

					//第一次切换tab，动画结束后需要加载数据
					// let tabItem = this.tabBars[this.tabCurrentIndex];
					// if(this.tabCurrentIndex !== 0 && tabItem.loaded !== true){
					// 	this.loadNewsList('add');
					// 	tabItem.loaded = true;
					// }
				}, 300)

			},
				//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#' + id).fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, function(data){
						res(data);
					}).exec();
				});
			}
		}
	}
</script>

<style lang="scss">
	.content-product-type{
		height: 80rpx;
		margin-bottom: 20rpx;
	}
	.fiexed{
		position: fixed;
		width: 100%;
		top: 0rpx;
		height: 80rpx;
		left: 0;
		z-index: 100;
	}
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 80rpx;
		white-space: nowrap;
		.nav-item{
			display: inline-block;
			width: 150rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #999999;
			font-size: 28rpx;
			position: relative;
			&::after {
				content: '';
				width: 0;
				height: 4rpx;
				background-color: #02BB6F;
				border-radius: 1px;
				position: absolute;
				left: 50%;
				bottom: 2rpx;
				transform: translateX(-50%);
				transition: .3s;
			}
			
			&.current {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				
			
				&::after {
					width: 60rpx;
					border-bottom: 4rpx solid #02BB6F;
				}
			}
			/* &:after{
				content: '';
				width: 0;
				height: 3px;
				background: $color-primary;
				border-radius: 3px;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			} */
		}
		/* .current{
			font-size: 36rpx;
			color: #333;
			font-weight:800;
			&:after{
				width: 32rpx;
			}
		} */
	}
</style>
